<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/font.css" />
	<link rel="stylesheet" href="css/region.css" />
	<link rel="stylesheet" href="plugins/iziModal/iziModal.css" />
	<style>
		body {
			margin: 0;
			padding: 0;
			width: 660px;
			max-height: 420px;
			overflow: hidden;
			font-size: 14px;
		}
		
	</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="plugins/iziModal/iziModal.js" ></script>
	<script type="text/javascript" src="plugins/datepicker/WdatePicker.js" ></script>
	<script type="text/javascript" src="js/balloonSpot.js" ></script>
	
</head>
<body>
	<div class="city-block">
		<div class='result-panel'>
			<label>已选项</label>
			<input type="hidden" id="sel-city" />
		</div>
		<div class="data-tabs">
			<ul class="natty-tabs">
				<li class="active-tab" data-index="1"><label id="extra-boot"><span>全部</span></label></li>
				<li data-index="2" style="display:none;"><label><span></span></label></li>
			</ul>
			<input id="search-city" placeholder="请搜索城市"  />
			<div class="search-result" style="display:none;">
				<ul></ul>
			</div>
		</div>
		<div class="data-block" data-tab="1">
			<h4><label>全部省区</label></h4>
			<div class="data-info">
				<ul></ul>
			</div>
		</div>
		<div class="data-block" data-tab="2"  style="display:none;">
			<h4></h4>
			<div class="data-info">
				<ul></ul>
			</div>
		</div>
	</div>
	<div class="block-button">
		<label class='item-ace bord-green cancel-confirm' style='margin-right:8px;'><span>取消</span></label>
		<label class='item-ace btn-green do-confirm'><span>确定</span></label>
	</div>
<script>
	$(function(){
		loadProvince();
		
		// open the city tab
		$(".city-block").off("click", ".normal-region");
		$(".city-block").on("click", ".normal-region", function(){
			var $cur = $(this);
			var $parent = $cur.parents("div.data-block");
			$(".data-tabs").find(".natty-tabs>li[data-index='2']>label>span").text($cur.data("name"));
			$(".data-tabs").find(".natty-tabs>li[data-index='2']").addClass("active-tab").show();
			$(".data-tabs").find(".natty-tabs>li[data-index='1']").removeClass("active-tab");
			
			loadCityByProvince($cur.data("id"), $cur.data("name"), false);
		});
		
		// open the city tab with checked
		$(".city-block").off("click", ".smart-region");
		$(".city-block").on("click", ".smart-region", function(){
			var $cur = $(this);
			var $parent = $cur.parents("div.data-block");
			$(".data-tabs").find(".natty-tabs>li[data-index='2']>label>span").text($cur.data("name"));
			$(".data-tabs").find(".natty-tabs>li[data-index='2']").addClass("active-tab").show();
			$(".data-tabs").find(".natty-tabs>li[data-index='1']").removeClass("active-tab");
			
			loadCityByProvince($cur.data("id"), $cur.data("name"), true);
		});
		
		// select the city
		$(".city-block").off("click", ".normal-bee");
		$(".city-block").on("click", ".normal-bee", function(){
			var $cur = $(this);
			var item = "<label class='result-item' data-id='"+$cur.data("id")+"' data-parent='"+$cur.data("parent")+"'><span>"+$cur.data("name")+"</span><span class='icon-remove'></span></label>"
			$(".result-panel").append(item);
			var $label = $(".city-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("parent")+"']");
			var curItems = $label.find("span").text();
			curItems = curItems ? (curItems / 1 + 1) : 1;
			$label.find("span").text(curItems).addClass("smart-num");
			$cur.removeClass("normal-bee").addClass("smart-bee");
			
			var vals = $("#sel-city").val();
			vals += "," + $cur.data("id");
			vals = vals.startsWith(",") ? vals.substr(1) : vals;
			$("#sel-city").val(vals);
		});
		
		// deselect the city 
		$(".city-block").off("click", ".smart-bee");
		$(".city-block").on("click", ".smart-bee", function(){
			var $cur = $(this);
			var $item = $(".result-panel").find("label[data-id='"+$cur.data("id")+"']");
			$item.remove();
			
			var $label = $(".city-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("parent")+"']");
			var curItems = $label.find("span").text();
			curItems = curItems ? (curItems / 1 - 1) : 1;
			if(curItems == 0) {
				$label.find("span").text("").removeClass("smart-num");
			} else {
				$label.find("span").text(curItems);
			}
			
			var vals = $("#sel-city").val();
			var valArr = vals.split(",");
			var _vals = "";
			for(var i in valArr) {
				var _val = valArr[i];
				if(_val != $cur.data("id")) {
					_vals += "," + _val;
				}
			}
			_vals = _vals.startsWith(",") ? _vals.substr(1) : _vals;
			$("#sel-city").val(_vals);
			
			$cur.removeClass("smart-bee").addClass("normal-bee");
		});
		
		// select the province
		$(".city-block").off("click", ".natty-selector");
		$(".city-block").on("click", ".natty-selector", function(){
			var $cur = $(this);
			
			var item = "<label class='result-item' data-id='"+$cur.data("id")+"' data-parent='"+$cur.data("id")+"'><span>"+$cur.data("name")+"</span><span class='icon-remove'></span></label>"
			$(".result-panel").append(item);
			
			var ids = ""
			$(".city-block").find(".data-block[data-tab='2']").find(".data-info>ul>li>label").each(function(){
				var $label = $(this);
				var id = $label.data("id");
				ids += "," + id;
			});
			
			var vals = $("#sel-city").val();
			var valArr = vals.split(",");
			var _vals = "";
			var rmIds = new Array();
			for(var i in valArr) {
				var _v = valArr[i];
				if(ids.indexOf(_v) == -1) {
					_vals +=  _v + ",";
				} else {
					rmIds.push(_v);
				}
			}
			_vals += $cur.data("id");
			$("#sel-city").val(_vals);
			
			for(var x in rmIds) {
				var _x = rmIds[x];
				$(".result-panel>label.result-item[data-id='"+_x+"']").remove();
			}
						
			var $block = $(".city-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("id")+"']");
			$block.removeClass("normal-region").addClass("smart-region");
			$block.find("span").text("1")
			$(".city-block").find(".data-block[data-tab='2']").find(".data-info>ul>li>label").removeClass("normal-bee").removeClass("smart-bee").addClass("disable-bee");
			$cur.removeClass("natty-selector").addClass("smart-selector");
		});
		
		// deselect the province
		$(".city-block").off("click", ".smart-selector");
		$(".city-block").on("click", ".smart-selector", function(){
			var $cur = $(this);
			
			var $item = $(".result-panel").find("label[data-id='"+$cur.data("id")+"']");
			$item.remove();
			
			var vals = $("#sel-city").val();
			var valArr = vals.split(",");
			var _vals = "";
			for(var i in valArr) {
				var _val = valArr[i];
				if(_val != $cur.data("id")) {
					_vals += "," + _val;
				}
			}
			_vals = _vals.startsWith(",") ? _vals.substr(1) : _vals;
			$("#sel-city").val(_vals);
			
			var $block = $(".city-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("id")+"']");
			$block.removeClass("smart-region").addClass("normal-region");
			$block.find("span").text("").removeClass("smart-num");
			$(".city-block").find(".data-block[data-tab='2']").find(".data-info>ul>li>label").removeClass("disable-bee").addClass("normal-bee");
			$cur.removeClass("smart-selector").addClass("natty-selector");
		});
		
		// search the city
		$(".city-block").off("keyup", "#search-city");
		$(".city-block").on("keyup", "#search-city", function(event){
			var val = $(this).val();
			if(val != "" && event.keyCode == 13) {
				loadCityBySearch(val);
			}
		});
		
		// select the result
		$(".city-block").off("click", ".search-result>ul>li>label");
		$(".city-block").on("click", ".search-result>ul>li>label", function(){
			var $cur = $(this);
			var vals = $("#sel-city").val();
			if(vals.indexOf($cur.data("id")) == -1) {
				var item = "<label class='result-item' data-id='"+$cur.data("id")+"' data-parent='"+$cur.data("parent")+"'><span>"+$cur.data("name")+"</span><span class='icon-remove'></span></label>"
				$(".result-panel").append(item);
				vals = (vals == "") ? $cur.data("id") :  vals + "," + $cur.data("id");
				$("#sel-city").val(vals);
				
				var $label = $(".city-block").find(".data-block[data-tab='1']").find("label[data-id='"+$cur.data("parent")+"']");
				var curItems = $label.find("span").text();
				curItems = curItems ? (curItems / 1 + 1) : 1;
				$label.find("span").text(curItems).addClass("smart-num");
				$cur.removeClass("normal-bee").addClass("smart-bee");
			}
			$(".search-result").hide();
		});
		
		// delete the selects
		$(".city-block").off("click", ".result-item");
		$(".city-block").on("click", ".result-item", function(){
			var vals = $("#sel-city").val();
			var id = $(this).data("id");
			var valArr = vals.split(",");
			var _val = "";
			for(var i in valArr) {
				var _v = valArr[i];
				if(_v != id) {
					_val += "," + _v;
				}
			}
			_val = _val.startsWith(",") ? _val.substr(1) : _val;
			$("#sel-city").val(_val);
			
			var parentId = $(this).data("parent");
			if(id == parentId) {
				var $block = $(".city-block").find(".data-block[data-tab='1']").find("label[data-id='"+parentId+"']");
				$block.removeClass("smart-region").addClass("normal-region");
				$block.find("span").text("").removeClass("smart-num");
			} else {
				var $block = $(".city-block").find(".data-block[data-tab='1']").find("label[data-id='"+parentId+"']");
				var items = $block.find("span").text();
				items = items / 1 - 1;
				if(items == 0) {
					$block.find("span").text("").removeClass("smart-num");
				} else {
					$block.find("span").text(items);
				}
			}
			
			$(this).remove();
		})
		
		// close the city win
		$(".city-block").off("click", "#extra-boot");
		$(".city-block").on("click", "#extra-boot", function(){
			$(".data-tabs").find(".natty-tabs>li[data-index='2']>label>span").text("");
			$(".data-tabs").find(".natty-tabs>li[data-index='2']").removeClass("active-tab").hide();
			$(this).parent().addClass("active-tab");
			var $block = $(".city-block").find(".data-block[data-tab='2']");
			$block.find("h4").html("");
			$block.find("div>ul").empty();
			$block.hide();
			$(".city-block").find(".data-block[data-tab='1']").show();
		});
	});
	
	function loadProvince(){
		var req = $.ajax({
			type: "GET",
			url: "city.json",
			dataType: "JSON"
		});
		
		req.done(function(data){
			var provinceList = data.provinceList;
			var content = "";
			for(var x in provinceList) {
				var _cur = provinceList[x];
				content += "<li><label class='normal-region' data-name='"+_cur.name+"' data-id='"+_cur.code+"'>"+_cur.name+"<span></span></li>";
			}
			$(".city-block").find(".data-block[data-tab='1']>div>ul").append(content);
		});
	}
	
	function loadCityByProvince(code, name, checkProvince) {
		var sels = $("#sel-city").val();
		var req = $.ajax({
			type: "GET",
			url: "city.json",
			dataType: "JSON"
		});
		
		req.done(function(data){
			var cityList = data.cityList;
			var content = "";
			for(var x in cityList) {
				var _cur = cityList[x];
				if(_cur.parentCode == code) {
					var cls = sels.indexOf(_cur.code) == -1 ? "normal-bee" : "smart-bee";
					cls = checkProvince ? "disable-bee" : cls;
					content += "<li><label class='"+cls+"' data-name='"+_cur.name+"' data-id='"+_cur.code+"' data-parent='"+_cur.parentCode+"'>"+_cur.name+"<span></span></li>"	
				}
			}
			$(".city-block").find(".data-block[data-tab='1']").hide();
			var $block = $(".city-block").find(".data-block[data-tab='2']");
			$block.show();
			var l_cls = checkProvince ? "smart-selector" : "natty-selector";
			var info = "<label class='"+l_cls+"' data-name='"+name+"' data-id='"+code+"'>" + name + "<span></span></label>";
			$block.find("h4").html(info);
			$(".city-block").find(".data-block[data-tab='2']>div>ul").append(content);
		});
	}
	
	function loadCityBySearch(searchVal) {
		var req = $.ajax({
			type: "GET",
			url: "city.json",
			dataType: "JSON"
		});
		
		req.done(function(data){
			var cityList = data.cityList;
			var content = "";
			var cityList = data.cityList;
			var content = "";
			for(var x in cityList) {
				var _cur = cityList[x];
				if(_cur.name.indexOf(searchVal) != -1) {
					content += "<li><label data-id='"+_cur.code+"' data-name='"+_cur.name+"' data-parent='"+_cur.parentCode+"'><span>"+_cur.name+"</span></label></li>";
				}
			}
			$(".search-result>ul").empty().append(content);
			$(".search-result").show();
		});
	}
</script>
</body>

</html>
